<template>
    <div class="profile">
        <h2>个人主页</h2>
        <div class="profile-info">
            <div class="info-item">
                <label>姓名：</label>
                <span>{{ userInfo.name }}</span>
            </div>
            <div class="info-item">
                <label>职位：</label>
                <span>{{ userInfo.position }}</span>
            </div>
            <div class="info-item">
                <label>部门：</label>
                <span>{{ userInfo.department }}</span>
            </div>
            <div class="detail-item">
                <label>账号：</label>
                <span>{{ userInfo.username }}</span>
            </div>
            <div class="detail-item">
                <label>联系方式：</label>
                <span>{{ userInfo.contactInformation }}</span>
            </div>
            <div class="detail-item">
                <label>角色：</label>
                <span>{{ userInfo.role }}</span>
            </div>
            <div class="detail-item">
                <label>权限：</label>
                <span>{{ userInfo.permission }}</span>
            </div>
        </div>

        <div class="profile-salary">
            <h2>薪资信息</h2>
            <div class="salary-item">
                <label>基本工资：</label>
                <span>{{ salaryInfo.baseSalary }} 元</span>
            </div>
            <div class="salary-item">
                <label>奖金：</label>
                <span>{{ salaryInfo.bonus }} 元</span>
            </div>
            <div class="salary-item">
                <label>社保缴费：</label>
                <span>{{ salaryInfo.socialSecurityContribution }} 元</span>
            </div>
            <div class="salary-item">
                <label>个税缴费：</label>
                <span>{{ salaryInfo.individualIncomeTax }} 元</span>
            </div>
            <div class="salary-item">
                <label>发放日期：</label>
                <span>{{ salaryInfo.salaryPaymentDate }}</span>
            </div>
        </div>

        <div class="profile-salary-adjustments">
            <h2>调薪记录</h2>
            <div v-if="salaryAdjustments.length > 0">
                <div v-for="(adjustment, index) in salaryAdjustments" :key="index" class="adjustment-item">
                    <div class="adjustment-detail">
                        <label>调薪前基本工资：</label>
                        <span>{{ adjustment.previousBaseSalary }} 元</span>
                    </div>
                    <div class="adjustment-detail">
                        <label>调薪后基本工资：</label>
                        <span>{{ adjustment.newBaseSalary }} 元</span>
                    </div>
                    <div class="adjustment-detail">
                        <label>调薪原因：</label>
                        <span>{{ adjustment.reason }}</span>
                    </div>
                    <div class="adjustment-detail">
                        <label>调薪日期：</label>
                        <span>{{ adjustment.adjustmentDate }}</span>
                    </div>
                </div>
            </div>
            <div v-else>
                <p>暂无调薪记录</p>
            </div>
        </div>
    </div>
</template>
<script>
    import { getUserProfile, getSalaryInfo, getSalaryAdjustments } from "@/api/Info"; // 假设后端接口

    export default {
        name: "UserProfile",
        data() {
            return {
                userId: "",
                userInfo: {
                    username: "",
                    name: "",
                    position: "",
                    department: "",
                    contactInformation: "",
                    role: "",
                    permission: ""
                },
                salaryInfo: {
                    baseSalary: 0,
                    bonus: 0,
                    socialSecurityContribution: 0,
                    individualIncomeTax: 0,
                    salaryPaymentDate: ""
                },
                salaryAdjustments: [] // 用于存储调薪记录
            };
        },
        created() {
            const user = JSON.parse(localStorage.getItem("user"));
            if (user) {
                this.userId = user.id;
                this.fetchUserProfile();
                this.fetchSalaryInfo();
                this.fetchSalaryAdjustments();
            }
        },
        methods: {
            async fetchUserProfile() {
                try {
                    const response = await getUserProfile(this.userId);
                    if (response && response.data && response.data.code === 200) {
                        this.userInfo = response.data.data || {};
                    } else {
                        this.$message.error(response.data.message || "获取用户信息失败");
                    }
                } catch (error) {
                    console.error("获取用户信息失败:", error);
                    this.$message.error("获取用户信息失败");
                }
            },
            async fetchSalaryInfo() {
                try {
                    const response = await getSalaryInfo(this.userId);
                    if (response && response.data && response.data.code === 200) {
                        this.salaryInfo = response.data.data || {};
                    } else {
                        this.$message.error(response.data.message || "获取薪资信息失败");
                    }
                } catch (error) {
                    console.error("获取薪资信息失败:", error);
                    this.$message.error("获取薪资信息失败");
                }
            },
            async fetchSalaryAdjustments() {
                try {
                    const response = await getSalaryAdjustments(this.userId);
                    if (response && response.data && response.data.code === 200) {
                        this.salaryAdjustments = response.data.data || [];
                    } else {
                        this.$message.error(response.data.message || "获取调薪记录失败");
                    }
                } catch (error) {
                    console.error("获取调薪记录失败:", error);
                    this.$message.error("获取调薪记录失败");
                }
            }
        }
    };
</script>
<style scoped>
    .profile {
        max-width: 600px;
        margin: 20px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #f9f9f9;
    }

    .profile h2 {
        text-align: center;
        margin-bottom: 20px;
    }

    .profile-info, .profile-details, .profile-salary, .profile-salary-adjustments {
        margin-bottom: 20px;
    }

    .info-item, .detail-item, .salary-item, .adjustment-detail {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .info-item label, .detail-item label, .salary-item label, .adjustment-detail label {
        font-weight: bold;
        width: 150px;
    }

    .info-item span, .detail-item span, .salary-item span, .adjustment-detail span {
        flex: 1;
    }

    .adjustment-item {
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .adjustment-item:last-child {
        border-bottom: none;
    }
</style>